<script setup lang="ts">
import { RouterView } from 'vue-router'
import Menu from "@/views/Menu.vue";
import { ref } from 'vue';
import { Expand,Fold } from '@element-plus/icons-vue';
import {conrouters} from '@/router/index'

let stretch = ref(true); // 伸缩菜单
// 伸缩菜单
function changestretch() {
  stretch.value = !stretch.value
  const c_left = document.querySelector('.c_left') as HTMLElement;
  const c_right = document.querySelector('.c_right') as HTMLElement;
  const titlespan = document.querySelector('#titlespan') as HTMLElement;
  if (stretch.value) {
    c_left.style.width = '200px';
    c_right.style.width = 'calc(100% - 200px)';
    titlespan.style.display = 'block';
  } else {
    titlespan.style.display = 'none';
    c_left.style.width = '80px';
    c_right.style.width = 'calc(100% - 80px)';
  }
}

</script>

<template>
  <div class="layout">
    <!-- 左侧 -->
    <div class="c_left" :class="{ contral: !stretch }" style="max-width: 260px;">
      <!-- 顶部logo -->
      <div class="logo">
        <img src="/public/huawei.svg" alt="logo" style="width: 40px; height: 40px;" />
        <span id="titlespan" :class="{ contral: !stretch }">供应链管理部</span>
      </div>
      <!-- 菜单 -->
      <div class="menu">
        <el-scrollbar class="scrollbar"> <!-- 菜单滚动条 -->
          <el-menu  style="border: none;" router :collapse="!stretch"
            :default-active="$route.path"  active-text-color="#fff">
            <Menu :menuList="conrouters"></Menu>
          </el-menu>
        </el-scrollbar>

      </div>
    </div>

    <!-- 右侧 -->
    <div class="c_right" :class="{ contral: !stretch }">
      <!-- 顶部 -->

      <div class="top">
        <div class="top_left">
          <el-icon @click="changestretch">
            <Expand v-show="stretch" />
            <Fold v-show="!stretch" />
          </el-icon>
        </div>

        <div class="top_right">
          <span style="color: #434F4B;">版本号：V1.0.8(20250115)</span>
        </div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  display: flex;

  //  左侧
  .c_left {
    height: 100vh;
    display: flex;
    flex-direction: column;
    // background-color: #fff;
    transition: all 0.5s ease;
    width: 200px;
    background-image: radial-gradient(circle, #d16ba5, #ca6fb3, #c074c1, #b27ace, #a281da, #a182e2, #9f83ea, #9c85f3, #b07ff9, #c578fd, #dc6dfd, #f45ffb);
    // 顶部logo
    .logo {
      flex: 1;
      height: 60px;
      display: flex;
      align-items: center;

      img {

        object-fit: cover;
        margin: 0 5px;
      }

      span {
        font-size: 20px;
        color: #3579a1;
        font-weight: bold;
        margin-left: 10px;
        transition: all 0.5s ease;
      }
    }

    // 菜单
    .menu {
      flex: 10;
      padding: 10px;
      background-image: linear-gradient(to left top, #9c6bd1, #9479d9, #8d85df, #8890e3, #859be6, #869cec, #889df2, #8a9ef8, #9894ff, #ac87ff, #c576ff, #e05ffb);
      .scrollbar {
        width: 100%;
        height: calc(100vh - 80px);
      }
    }
  }

  // 右侧
  .c_right {
    height: 100vh;
    width: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;

    // 顶部
    .top {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      background-image: radial-gradient(circle, #d16ba5, #ca6fb3, #c074c1, #b27ace, #a281da, #a182e2, #9f83ea, #9c85f3, #b07ff9, #c578fd, #dc6dfd, #f45ffb);
      .top_right {
        display: flex;
        align-items: center;

        .top_right_dropdown {
          margin-left: 15px;
        }

      }
    }

    // 内容
    .content {
      height: calc(100vh - 60px);
      padding: 10px;
    }
  }
}
::v-deep .el-menu {
  // background-image: linear-gradient(to left top, #9c6bd1, #9479d9, #8d85df, #8890e3, #859be6, #869cec, #889df2, #8a9ef8, #9894ff, #ac87ff, #c576ff, #e05ffb);
  background-color: rgba(255, 255, 255, 0);
}
::v-deep .el-menu-item:hover {
  background: #e05ffb;
  
}
::v-deep .el-sub-menu__title:hover {
  background: #e05ffb;
  
}

</style>